<template>
<van-form @submit="onSubmit" class="login">
  <div class="title">注册</div>
  <van-cell-group inset>
    <van-field
      v-model="userAccount"
      name="userAccount"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <van-field
      v-model="userMobile"
      name="userMobile"
      label="手机号"
      placeholder="手机号"
      :rules="[{ validator, message: '请输入正确的手机号' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      注册
    </van-button>
  </div>
</van-form>
</template>

<script>
import { Form, Field, CellGroup,Button,Calendar  } from 'vant';
import { ref } from 'vue';
export default {
    components:{
        'van-form':Form,
        'van-field':Field,
        'van-button':Button,
        'van-cell-group':CellGroup,
        'van-calendar': Calendar
    },
    setup() {
    const userAccount = ref('');
    const password = ref('');
    const userMobile = ref('');
    const validator = (val) => /1\d{10}/.test(val);
    const onSubmit = (values) => {
        //登录请求
        console.log(values);
      };
    return {
      userAccount,
      password,
      userMobile,
      validator,
      onSubmit
    };
  },
}
</script>

<style scoped>
.login{
    min-width: 100%; 
    padding-top: 10em;
    min-height: 100%; 
    position: absolute;
    background-color: rgb(247, 248, 250);
}
.title{
  font-size: 2em;
  padding-bottom: 1em;
  text-align: center;
}
</style>